<template>
  <close-layer
    @close="$emit('close')"
    :enable-drag="true"
    :style="getCloseStyle">
    <div
      slot="layer-content"
      :style="getContentStyle">
      <a-form>
        <a-form-item
          label="搜索深度"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input
            v-model="config.deep"
            placeholder="必须是数字而且大于等于0"></a-input>
        </a-form-item>
        <a-form-item
          style="margin-top: -12px"
          label="单次限制数"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input
            v-model="config.limit"
            placeholder="必须是数字而且大于等于0"></a-input>
        </a-form-item>
        <a-form-item
          style="margin-top: -12px"
          label="布局方式"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-select default-value="gFore">
            <a-select-option value="gFore">
              力导向图
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          style="margin-top: -12px"
          label="边类型"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-select default-value="arrow">
            <a-select-option value="arrow">
              箭头
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          style="margin-top: -12px"
          label="是否显示文字"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-switch
            @change="visibleChange"
            :default-checked="option.visibleText">
          </a-switch>
        </a-form-item>
        <a-button
          @click="confirmSetting"
          type="primary"
          style="margin-left: 240px">确定
        </a-button>
      </a-form>
    </div>
  </close-layer>
</template>

<script>
import TagSelectOption from '@/components/TagSelect/TagSelectOption'
import CloseLayer from '@/components/CloseLayer/CloseLayer'

export default {
  name: 'GraphSetting',
  components: { CloseLayer, TagSelectOption },
  props: {
    option: {
      type: Object,
      required: true
    },
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    }
  },
  created() {
    const visibleText = this.option.visibleText
    if (visibleText === undefined || visibleText === null) {
      this.option.visibleText = true
    }
    this.config = Object.assign(this.option)
  },
  methods: {
    visibleChange(v) {
      this.config.visibleText = v
    },
    verify(number) {
      const regex = RegExp(/^[0-9]*$/)
      if (number) {
        const isNumber = regex.test(number.toString())
        if (!isNumber) {
          return '必须是数字'
        }
        if (parseInt(number) <= 0) {
          return '必须大于0'
        }
      }
      return undefined
    },
    confirmSetting() {
      const deepMessage = this.verify(this.config.deep)
      if (deepMessage) {
        this.$message.error(deepMessage)
        return
      }
      const limitMessage = this.verify(this.config.limit)
      if (limitMessage) {
        this.$message.error(limitMessage)
        return
      }
      this.$emit('graphSetting', this.config)
    }
  },
  data() {
    return {
      config: {
        deep: undefined,
        limit: undefined,
        visibleText: true
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 17 }
      },
      getCloseStyle: {
        'position': 'absolute',
        'top': this.y + 'px',
        'left': this.x + 'px',
        'z-index': 3000
      },
      getContentStyle: {
        'background-color': 'white',
        'padding': '10px',
        'max-width': '340px',
        'width': '340px',
        'border': '1px solid #d5d5d5'
      }
    }
  }
}
</script>

<style scoped>

</style>
